<template>
  <div class="dialog">
    <el-dialog title="新建线路" width="50%" v-model="props.dialogVisible">
      <span :style="{ marginLeft: '80px' }">车次类型</span>&emsp;
      <el-select
        v-model="value"
        class="m-2"
        placeholder="请选择"
        size="default"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <span :style="{ marginLeft: '80px' }">车次</span>&emsp;
      <el-select
        v-model="value1"
        class="m-2"
        placeholder="请输入车次"
        size="default"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <h3>&emsp;车站线路:</h3>
      <el-transfer
        v-model="value2"
        :titles="['车站', '车站线路']"
        :left-default-checked="[2, 3]"
        :data="data"
        filterable
        filter-placeholder="搜索站名"
        :style="{ marginLeft: '120px' }"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="close1">返回</el-button>
          <el-button type="primary" @click="confirm"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, toRefs, defineEmits } from "vue";
import { ElMessageBox } from "element-plus";

const props = defineProps({
  dialogVisible: Boolean,
});
let value = ref("");
let value1 = ref("");
const generateData = () => {
  const data = [];
  for (let i = 1; i <= 25; i++) {
    data.push({
      key: i,
      label: `站点A`,
    });
  }
  return data;
};

const data = ref(generateData());
const value2 = ref([]);
const options = [
  {
    value: "高速列车",
    label: "高速列车",
  },
];
const options1 = [
  {
    value: "G71高铁",
    label: "G71高铁",
  },
];
let { dialogVisible } = toRefs(props);
const emits = defineEmits(["closeTan", "confirm1", "addList"]);
const close1 = () => {
  dialogVisible = false;
  emits("closeTan", dialogVisible);
};
const confirm = () => {
  let arrIndex = value2.value;
  let arr = [];
  arrIndex.forEach((item) => {
    arr.push(item);
  });
  let arr1 = [];
  arr.forEach((item, index) => {
    arr1.push(data.value[arr[index] - 1]);
  });
  dialogVisible = false;
  emits("confirm", {
    dialogVisible,
    arr1,
  });
};
const addChange = () => {
  console.log(input.value);
};
const handleClose = (done) => {};
// const filterMethod = () => {};
</script>
<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
